<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>index</title>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <script th:inline="javascript">
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/

        // 挂载到 window 对象上
        window['ctxPath'] = ctxPath;
    </script>
    　　
    <script th:src="@{/js/main.mjs}" type="module"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true">
                <el-form-item label="文件切片大小（单位 MB）">
                    <el-input-number v-model="fileSize"></el-input-number>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-tabs>
                <el-tab-pane label="切片" name="0">

                    <el-form :inline="true">
                        <el-form-item>
                            <el-upload
                                    :action="uploadAction"
                                    :auto-upload="false"
                                    :data="uploadData"
                                    :limit="1"
                                    :on-exceed="handleExceed"
                                    :on-success="handleSuccess"
                                    ref="upload"
                            >
                                <template #trigger>
                                    <el-button type="primary">选择一个文件</el-button>
                                </template>
                                <el-button @click="submitUpload" type="success">
                                    上传
                                </el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="downloadSelection" type="success">
                                下载选中
                            </el-button>
                        </el-form-item>

                        <el-form-item>
                            <el-button @click="downloadTmp" type="success">
                                下载所有 tmp
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="downloadTmpZip" type="success">
                                下载所有 tmp zip
                            </el-button>
                        </el-form-item>
                    </el-form>


                    <el-table
                            :data="tableData"
                            border
                            ref="multipleTableRef"
                            stripe
                            style="width: 100%"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="文件名" property="fileName" show-overflow-tooltip></el-table-column>
                        <el-table-column label="文件路径" property="filePath" show-overflow-tooltip></el-table-column>
                        <el-table-column label="文件大小" property="fileSize" show-overflow-tooltip></el-table-column>
                        <el-table-column label="文件大小(可读)" property="fileSizeStr"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template #default="scope">
                                <el-button @click="handleDownloadClick(scope.row)" link size="small" type="primary">下载
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="合并" name="1">
                    <el-form :inline="true">
                        <el-form-item>
                            <el-upload
                                    :auto-upload="false"
                                    :data="uploadData"
                                    :file-list="fileListMerge"
                                    :http-request="uploadFileMerge"
                                    action
                                    multiple
                                    ref="uploadMerge">
                                <template #trigger>
                                    <el-button type="primary">选取文件</el-button>
                                </template>

                                <el-button @click="submitUploadMerge" type="success">上传
                                </el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>
</body>
</html>
